<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>统计报表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/js/echarts.min.js"></script>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">统计报表</a>
        <a>
          <cite>统计报表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.reload();" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input class="layui-input" placeholder="开始日" id="start" autocomplete="off">
            <input class="layui-input" placeholder="截止日" id="end" autocomplete="off">
            <input type="text" placeholder="姓名" id="realname" autocomplete="off" class="layui-input">
            <input type="text" placeholder="标题" id="title" autocomplete="off" class="layui-input">
            <div class="layui-input-inline">
                <select id="payway">
                    <option value="-1">选择支付方式</option>
                </select>
            </div>
            <button class="layui-btn" type="button" lay-submit="" lay-filter="sreach" onclick="getBills()">
                <i class="layui-icon">&#xe615;</i>搜索
            </button>
            <button class="layui-btn layui-btn-primary" type="reset">
                <i class="layui-icon">&#xe640;</i>重置
            </button>
        </form>
    </div>
    <fieldset class="layui-elem-field" style="height: 1000px; ">
        <div id="chart1" class="layui-col-md6 layui-col-sm12" style="height: 400px;"></div>
        <div id="chart11" class="layui-col-md6 layui-col-sm12" style="height: 400px;"></div>
        <div id="chart2" style="height: 600px;"></div>
    </fieldset>
</div>

<script>
    getAllPayways();
    mPageSize = 10000;
    $(function () {
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#start', //指定元素
                max: 0
            });
            laydate.render({
                elem: '#end', //指定元素
                max: 0
            });
        });
        initChart();
        getBills();
    });

    function getBills() {
        var date = new Date();
        date.setDate(1);
        $("#start").val()==""? $("#start").val(date.toLocaleDateString().replace(/\//g,'-')) : {};
        $("#end").val()==""? $("#end").val(new Date().toLocaleDateString().replace(/\//g,'-')) : {};
        // console.log(daysBetween($("#end").val(),$("#start").val()));
        var bill = {
            "startTime": $("#start").val(),
            "endTime": $("#end").val(),
            "realname": $("#realname").val(),
            "title": $("#title").val(),
            "paywayid": $("#payway").val() == -1 ? null : $("#payway").val(),
        }
        // console.log(bill)
        // 异步加载数据
        $.post('/bills/getBillsToChart',bill, function (res) {
            if (res.code == 200){
                    setChart1(res.datas);
                    setChart11(res.datas);
                    setChart2(res.datas);

            } else {
                myChart1.hideLoading();
                myChart11.hideLoading();
                myChart2.hideLoading();
            }

        });
    }

    function initChart() {
        // 基于准备好的dom，初始化echarts实例
        myChart1 = echarts.init(document.getElementById('chart1'));
        // myChart11 = echarts.init(document.getElementById('chart11'));
        myChart11 = echarts.init(document.getElementById('chart11'));
        myChart2 = echarts.init(document.getElementById('chart2'));
        // 指定图表的配置项和数据
        myChart1.setOption({
            title : {
                text: '收支对比',
                x: 'center',
                y: 'bottom',
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c}元 ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: '10%',
                top: '10%',
                // align: 'left',
                data:['收入', '支出'],
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            color: [ '#ff9f7b', '#2fa1dd'],
            series : [
                {
                    name:'本月收支',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[],
                    label: {
                        position: 'inside',
                        formatter: '{b} \n\n {d}%',
                        fontSie: '40',
                        fontWeight: 'bold',
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: '#000'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20,
                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 100,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        });
        myChart1.showLoading();
        myChart11.setOption({
            title : {
                text: '支付方式',
                x: 'center',
                y: 'bottom',
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: ['支付宝', '微信', '银联', '现金', '其他']
            },
            yAxis: {
                type: 'value'
            },
            tooltip : {
                trigger: 'item',
                axisPointer:{
                    type: 'shadow',
                },
            },
            series: [{
                data: [],
                type: 'bar',
                barWidth: '40',
                label: {
                    show: true,
                    // position: 'inside',
                    color: '#FFFFFF',
                    distance: 20
                },
                itemStyle: {
                    barBorderRadius: [5, 5, 5, 5],// 圆角（左上、右上、右下、左下）
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {color: '#2FAEF2', offset: 0},
                        {color: '#1CD8A8', offset: 1}
                    ]), // 渐变
                },
            },{
                data: [],
                type: 'line',
                smooth: true, // 线条转折有弧度
                symbol: 'circle', // 数值点类型('circle', 'rectangle', 'triangle', 'diamond', 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond')
                showSymbol: true,
                itemStyle: {
                    color: ['#1CD8A8']
                },
                symbolSize: 8, // 数值点的大小
                lineStyle: {
                    width: 2,
                    color:  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#2FAEF2'},{offset: 1, color: '#1CD8A8'}])
                }, // 线条渐变
                // areaStyle: {
                //     color:  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                //         {offset: 0, color: 'rgba(47,174,242,0)'},
                //         {offset: 0.5, color: 'rgba(34,202,192,0.04)'},
                //         {offset: 1, color: 'rgba(28,216,168,0.52)'}]
                //     ),
                // },
            }]
        });
        myChart11.showLoading();
        myChart2.setOption({
            title : {
                text: '收支对比',
                x: 'center',
                y: 'bottom'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['收入','支出','净收入'],
                right: '5%',
                top: 10,
            },
            // dataZoom: [
            //     {
            //         type: 'inside',
            //         start: 60,
            //         end: 70
            //     }
            // ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'收入',
                    type:'bar',
                    itemStyle: {
                        barBorderRadius: [5, 5, 5, 5],// 圆角（左上、右上、右下、左下）
                        // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        //     {color: '#2FAEF2', offset: 0},
                        //     {color: '#1CD8A8', offset: 1}
                        // ]), // 渐变
                        color: "#ed9473",
                    },
                    data:[],
                },
                {
                    name:'支出',
                    type:'bar',
                    itemStyle: {
                        barBorderRadius: [5, 5, 5, 5],// 圆角（左上、右上、右下、左下）
                        // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        //     {color: '#c23531', offset: 0},
                        //     {color: '#caba26', offset: 1}
                        // ]), // 渐变
                        color: "#2fa1dd"
                    },
                    data:[]
                },
                {
                    name:'净收入',
                    type:'line',
                    areaStyle: {},
                    itemStyle: {
                        barBorderRadius: [5, 5, 5, 5],// 圆角（左上、右上、右下、左下）
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            {color: '#e0dec6', offset: 0},
                            {color: '#a1a1dc', offset: 1}
                        ]), // 渐变
                    },
                    smooth: true, // 线条转折有弧度
                    data:[]
                }
            ],
            animationDuration: function (idx) {
                // 越往后的数据延迟越大
                return idx * 300;
            }
        });
        myChart2.showLoading();
    }

    function setChart1(datas){
        var paySum = 0;
        var incomeSum = 0;
        $.each(datas,function (index,item) {
            if(item.typeid == 1){
                paySum += parseFloat(item.money);
            }else if (item.typeid == 2) {
                incomeSum += parseFloat(item.money);
            }
        });
        myChart1.hideLoading();
        myChart1.setOption({
            series: [{
                // 根据名字对应到相应的系列
                name: '本月收支',
                data: [
                    {value:incomeSum.toFixed(2), name:'收入', selected: true},
                    {value:paySum.toFixed(2), name:'支出'},
                ],
            }]
        });
    }

    function setChart11(datas) {
        var money = [0,0,0,0,0];
        $.each(datas,function (index,item) {
            for (var i = 0; i < 5; i++) {
                if (item.paywayid==(i+1)){
                    if (item.typeid == 1){
                        money[i] -= item.money;
                    }else if(item.typeid == 2){
                        money[i] += item.money;
                    }
                }
            }
        });
        myChart11.hideLoading();
        myChart11.setOption({
            series: [{
                data: money,
            },{
                data: money
            }]
        });
    }

    function setChart2(datas) {
        var x = [], payVal = new Array(30), incomeVal = new Array(30), netIncomeVal = new Array(30);
        var start = new Date($("#start").val());
        var end = new Date($("#end").val());
        var between = daysBetween(end,start);
        for (var i = 0; i<= between; i++){
            payVal[i]=0; incomeVal[i]=0, netIncomeVal[i]=0;
            var dateStr = dateAdd(start,i);
            x.push(dateStr);
            var incomeSum=0, paySum = 0, netIncomeSum = 0;
            $.each(datas,function (index,item) {
                if(item.time.split(" ")[0] == dateStr){
                    if (item.typeid == 1) {
                        paySum += parseFloat(item.money);
                    } else if (item.typeid == 2) {
                        incomeSum += parseFloat(item.money);
                    }
                }
            });
            netIncomeSum += incomeSum - paySum;
            payVal[i] = paySum;
            incomeVal[i] = incomeSum;
            netIncomeVal[i] = netIncomeSum;
        }
        // console.log(payVal);
        // console.log(incomeVal);
        myChart2.hideLoading();
        myChart2.setOption({
            xAxis: {
                data: x
            },
            series: [
                // 根据名字对应到相应的系列
                {
                    name:'支出',
                    data: payVal
                },
                {
                    name:'收入',
                    data: incomeVal
                },
                {
                    name:'净收入',
                    data: netIncomeVal
                }
            ]
        });
    }

</script>